<template>
  <view>
    <button @click="test">s</button>
    <lime-painter isRenderImage @success="onSuccess" @fail="onFail" ref="painter" width="566rpx" height="1016rpx" />
    <button @click="save">save</button>
    <image :src="item" mode="widthFix" v-for="(item, index) in paths"></image>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        base: '',
        path: '',
        paths: [],
      }
    },
    methods: {
      onSuccess(e) {
        this.paths.push(e);
        console.log(e);
      },
      onFail(e) {
        console.log(e);
      },
      makePoster(p) {
        return {
          width: '566rpx',
          height: '1016rpx',
          background: '#ff971b',
          views: [{
              // 背景图
              type: 'image',
              src: '/static/images/store/bg_share_posters.png',
              css: {
                left: '0rpx',
                top: '0rpx',
                width: '566rpx',
                height: '1016rpx'
              }
            }, {
              // 二维码
              type: 'image',
              src: '/static/9.jpg',
              css: {
                left: '218rpx',
                top: '28px',
                width: '130rpx',
                height: '128rpx',
                radius: '64rpx',
                border: '1rpx solid #FFFFFF'
              }
            },
            {
              // 邀请人
              type: 'text',
              text: '云忆邀请您抢购',
              // 可以指定关键字颜色
              rules: {
                word: ['邀请您抢购'],
                color: '#FFFFFF'
              },
              css: {
                left: '178rpx',
                top: '180rpx',
                color: '#FFFFFF',
                fontSize: '28rpx',
                height: '80rpx',
                lineHeight: '80rpx',
              }
            },
            {
              // 商品图片
              type: 'image',
              src: p,
              css: {
                left: '36rpx',
                top: '242rpx',
                width: '494rpx',
                height: '496rpx'
              }
            },
            {
              // 标题
              type: 'text',
              text: '限量抢购-法国欧珑香水套装赤橘30ml男女淡香',
              // 可以指定关键字颜色
              rules: {
                word: ['到地'],
                color: 'red'
              },
              css: {
                left: '38rpx',
                top: '748rpx',
                fontSize: '32rpx',
                color: '#FFFFFF',
                width: '480rpx',
                height: '94rpx',
                lineHeight: '46rpx',
                maxLines: '2'
              }
            },
            {
              // 优惠价
              type: 'text',
              text: '26元',
              // 可以指定关键字颜色
              rules: {
                word: ['到地'],
                color: 'red'
              },
              css: {
                left: '124rpx',
                top: '884rpx',
                width: '60rpx',
                height: '32rpx',
                fontSize: '22rpx',
                color: '#FFFFFF',
                lineHeight: '22rpx',
              }
            },
            {
              // 团购价
              type: 'text',
              text: '31.0元',
              // 可以指定关键字颜色
              rules: {
                word: ['到地'],
                color: 'red'
              },
              css: {
                left: '160rpx',
                top: '918rpx',
                width: '102rpx',
                height: '78rpx',
                fontSize: '48rpx',
                color: '#FFFFFF',
                lineHeight: '78rpx',
              }
            },
            {
              // 原价
              type: 'text',
              text: '26.0元',
              // 可以指定关键字颜色
              rules: {
                word: ['到地'],
                color: 'red'
              },
              css: {
                left: '332rpx',
                top: '946rpx',
                fontSize: '22rpx',
                color: '#FFFFFF',
                lineHeight: '28rpx',
              }
            },
            {
              // 划线
              type: 'view',
              css: {
                left: '330rpx',
                top: '958rpx',
                background: '#FFFFFF',
                width: '76rpx',
                height: '1rpx',
                // borderRadius: '16rpx 30rpx 10rpx 80rpx'
              }
            },
          ]
        }
      },
      test() {
        let posters = [
          'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3355464299,584008140&fm=26&gp=0.jpg',
          'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1247506875,2919233442&fm=26&gp=0.jpg',
          'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3438413553,834879777&fm=26&gp=0.jpg',
          'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3365503159,1655500687&fm=26&gp=0.jpg',
          'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1552305556,735845065&fm=26&gp=0.jpg',
          'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1157961245,4086073074&fm=26&gp=0.jpg'
        ];
        posters.forEach((item, index) => {
          // 支持通过调用render传入参数
          setTimeout(() => {
            const painter = this.$refs.painter;
            painter.render(this.makePoster(item));
          }, index * 1000)
        })
      },

      onRender() {
        // 支持通过调用render传入参数
        const painter = this.$refs.painter
        painter.render(this.base)
      },

      canvasToTempFilePath() {
        const painter = this.$refs.painter
        // 支持通过调用canvasToTempFilePath方法传入参数 调取生成图片
        painter.canvasToTempFilePath().then(res => this.path = res.tempFilePath)
      },
      save() {
        this.paths.forEach(item => {
          uni.saveImageToPhotosAlbum({
            filePath: item,
            success: () => {
              uni.showToast({title:'success'});
            }
          })
        })
      },
      saveImage() {
        this.isShowPopup = false
        console.log(this.path)
        uni.saveImageToPhotosAlbum({
          filePath: this.path,
          success(res) {
            uni.showToast({
              title: '已保存到相册',
              icon: 'success',
              duration: 2000
            })
          }
        })
      },
    }
  }
</script>
